﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script>
    var orderId = $.request("orderId"),
        siteId = $.request("siteId"),
        spaceId = $.request("spaceId"),
        depts = [],
        users = [],
        trIndex = 1;

    $(function () {
        $.ajax({
            url: "/OrderFlowManage/ClientOrder/GetDeptByUsersJson",
            data: {},
            dataType: "json",
            async: false,
            success: function (data) {
                var index = 0;
                for (var i in data) {

                    if (index == 0) {
                        depts.push('<option selected value="' + i + '">' + i + '</option>');
                        var items = data[i];
                        for (var j = 0; j < items.length; j++) {
                            var item = items[j];
                            users.push('<option value="' + item.F_UserId + '">' + item.F_UserName + '</option>');
                        }
                    } else {
                        depts.push('<option value="' + i + '">' + i + '</option>');
                    }
                    index++;
                }
                //console.log(depts);
                //console.log(users)
            }
        });
    });

    function btn_add() {
        var $previewPeopleGrid = $('#previewPeopleGrid');
        var html = '';
        html += '<tr id="tr' + trIndex + '">';
        html += '<td>';
        html += trIndex;
        html += '</td>';
        html += '<td>';
        html += '<select id="txt_depts' + trIndex + '" name="txt_depts' + trIndex + '" class="form-control txt_depts">';
        html += depts.join('');
        html += '</select>';
        html += '</td>';
        html += '<td>';
        html += '<select id="txt_users' + trIndex + '" name="txt_users' + trIndex + '" index="' + trIndex +'" class="form-control txt_users">';
        html += users.join('');
        html += '</select>';
        html += '</td>';
        html += '<td>';
        html += '<button type="button" class="btn btn-link btn-sm" onclick="btn_del(\'' + trIndex + '\')">删除</button>';
        html += '</td>';
        html += '</tr>';

        $previewPeopleGrid.append(html);
        $('#txt_depts' + trIndex + ', #txt_users' + trIndex).bindSelect();
        trIndex++;
        
    }

    function btn_del(index) {
        $('#tr' + index).remove();
    }

    function submitForm() {
        var $previewPeopleGrid = $('#previewPeopleGrid');
        var trs = $previewPeopleGrid.find('tr');

        if (trs.length) {
            var persons = [];
            $(".txt_users").each(function (i, ele) {
                var index = $(ele).attr("index");
                persons.push(JSON.stringify({ deptName: $('#txt_depts' + index).val(), userId: ele.value, userName: $(ele).find(":selected").text() }));
            });
            var param = { OrderId: orderId, SiteId: siteId, SpaceId: spaceId, Data: persons };
            //console.log(param);
            $.submitForm({
                url: "/OrderFlowManage/ClientOrder/SubmitPreviewPeopleForm?keyValue=" + orderId,
                param: param,
                success: function () {
                    $.currentWindow().vm.takelook.initTakelook();
                    $.loading(false);
                }
            });
        } else {
            $.modalMsg('请添加相关的陪同人员', 'success');
        }
    }
</script>

<form id="form1">
    <div style="margin:0 20px;">
        <table class="form">
            <tr>
                <th class="formTitle"><h4>预约陪同人员</h4></th>
                <td class="formValue">
                    <button class="btn btn-primary btn-sm" type="button" onclick="btn_add()">添加</button>
                </td>
            </tr>
        </table>
        <table class="table table-condensed table-bordered">
            <thead>
                <tr>
                    <td width="30">序号</td>
                    <td>部门</td>
                    <td width="100">陪同人员</td>
                    <td width="50">操作</td>
                </tr>
            </thead>
            <tbody id="previewPeopleGrid"></tbody>
        </table>
    </div>
</form>


